<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">

    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <link rel="stylesheet" href="/css/global.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script>
    <!--    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
</head>
<body>
<div class="bg"></div>
<div id="app">
    <van-row>
        <van-col span="24">
            <van-nav-bar
                    title="个人信息"
                    left-text="返回"
                    left-arrow
                    @click-left="onClickLeft"
            />
        </van-col>
        <van-col span="24">
            <div class="box m-4">
                <van-cell title="头像" size="large">
                    <!-- 使用 right-icon 插槽来自定义右侧图标 -->
                    <template #right-icon>
                        <van-image
                                round
                                width="28"
                                height="28"
                                src="https://img.yzcdn.cn/vant/cat.jpeg"
                        />
                    </template>
                </van-cell>
                <van-cell title="用户账号" size="large" is-link></van-cell>
                <van-cell title="用户昵称" size="large" @click="showPopup" value="爱马仕" is-link></van-cell>
                <van-cell title="邮箱" size="large" is-link></van-cell>
                <van-cell title="手机号码" size="large" is-link></van-cell>
                <van-cell title="生日" size="large" @click="showPopup2" is-link></van-cell>
                <van-popup
                        v-model="show"
                        closeable
                        position="bottom"
                        :style="{ height: '30%' }"
                >
                    <div style="margin: 50px 20px 20px 20px">
                        <textarea class="w-100 p-3 border bg-f9 mb-3" style="box-sizing: border-box"
                                  placeholder="请输入你的昵称">爱马仕</textarea>
                        <van-button type="primary" block>确认修改</van-button>
                    </div>
                </van-popup>
                <van-popup
                        v-model="show2"
                        position="bottom"
                        :style="{ height: '40%' }"
                >
                    <van-datetime-picker
                            v-model="currentDate"
                            type="date"
                            title="选择年月日"
                            :min-date="minDate"
                            :max-date="maxDate"
                            @cancel="TimeHide"
                    ></van-datetime-picker>
                </van-popup>

            </div>
        </van-col>
        <van-col span="24">
            <div class="m-4">
                <div class="w-100 pr-2">
                    <van-button square color="linear-gradient(to right, #ffa64b, #f65649)" block>确认保存</van-button>
                </div>
            </div>
        </van-col>
    </van-row>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                show: false,
                show2: false,
                minDate: new Date(2020, 0, 1),
                maxDate: new Date(2025, 10, 1),
                currentDate: new Date(),
            };
        },
        methods: {
            onClickLeft() {
                Toast('返回');
            },
            showPopup() {
                this.show = true;
            },
            showPopup2() {
                this.show2 = true;
            },
            TimeHide() {
                this.show2 = false;
            }
        },
    });
</script>
</html>